import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { Icon, Toast } from "antd-mobile";
import "./index.scss";
import { BillMonthData } from "../../../../Redux/Action/bill/billAction";
import yhTools from "../../../../tools/yh";
import xhfConfig from "../../../../config/XHFConfig";
import noData from "../../../../images/icon/no-data.png";

class BillHistoryPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			pageData: []
		};
	}

	componentDidMount() {
		this.prepareData();
	}

	prepareData() {
		const params = {
			url: xhfConfig.billHistory,
			params: {},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				this.setState({
					pageData: res.data || []
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	// 点击之后展示的是每个月的账单详情
	cellSelected(monthData, years) {
		this.props._billMonth({
			billMonth: {
				backPath: "#/billHistory",
				...monthData,
				years
			}
		});
		this.props.history.push({
			pathname: "/billMonth",
			params: {
				backPath: "#/billHistory",
				...monthData
			}
		});
	}

	render() {
		const _pageParams = {
			header: {
				title: "历史账单"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { pageData } = this.state;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="bill-history-container">
					{!pageData.length && (
						<React.Fragment>
							<div className="no-data-container">
								<img src={noData} alt="" />
								<p>暂无消费记录</p>
							</div>
						</React.Fragment>
					)}
					{pageData.map((yearData, index) => {
						return (
							<div key={index}>
								<div className="title textTitle">{yearData.years}年</div>
								<div className="detail">
									{yearData.monthBillDtos.map((monthData, index) => {
										return (
											<div
												key={index}
												className="cell"
												onClick={this.cellSelected.bind(
													this,
													monthData,
													yearData.years
												)}
											>
												<label>{monthData.months}月账单</label>
												<div className="c_right">
													<label>{monthData.billAmount}元</label>
													<Icon type="right"></Icon>
												</div>
											</div>
										);
									})}
								</div>
							</div>
						);
					})}
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_billMonth: data => {
			dispatch(BillMonthData(data));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(BillHistoryPage);
